<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      自定义指令：

        vue 本身提供的一些指令满足不了业务的需求，一般很少自定义
    </pre>

		<div id="app">
			<!-- <input type="text" autofocus /> -->
			<!-- 在使用自定义指令的时候，必须要加上 v- -->
			<input type="text" v-focus />
		</div>

		<script src="scripts/vue.js"></script>
		<script>
			// Vue.directive() 接收两个参数
			// 第一个参数：自定义指令的名称
			// 第二个参数：对象
			// 【 注意点：在声明自定义指令的时候，不需要加 v- ，但是在使用的时候需要加上 v- 】
			Vue.directive('focus', {
				// 钩子函数：就是指系统提供的方法，能够让程序在某一阶段做某件事
				// inserted 钩子函数 指使用了自定义指令的元素在父级中加载好以后执行
				// 在这个案例中，就是指 input 在 div 里面加载好以后，然后执行这个函数里面的内容

				// el 就是指使用了自定义指令的元素
				// 在这个案例中，el 指 input
				inserted: function (el) {
					el.focus()
				},
			})

			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
			})
		</script>
	</body>
</html>
